<template>
  <div class="main-content-wrapper d-flex flex-column">
    <!--头部-->
    <Top/>
    <div class="content-page-box-area">
      <div class="row">
        <div class="col-lg-4">
          <div class="prism-player" id="player-con"></div>
        </div>
      </div>
    </div>
  </div>
  <!--  底部-->
  <Footer/>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import axios from '@/plugins/axios.js'
import Top from "@/components/Top.vue";
import Footer from "@/components/Footer.vue";


onMounted(() => {
  let player = new Aliplayer({
        "id": "player-con",
        "source": "http://play.ray-live.cn/qingqing/1001.m3u8?auth_key=1737536961-0-0-24e62b77be0f1af598cd10e50e7b6107",
        "width": "100%",
        "height": "500px",
        "autoplay": true,
        "isLive": true,
        "rePlay": false,
        "playsinline": true,
        "preload": true,
        "controlBarVisibility": "hover",
        "useH5Prism": true
      }, function (player) {
        console.log("The player is created");
      }
  );
});
</script>

<style scoped>

</style>